<template>
	<view class="login-phone">
		<view class="logo-title">
			<image src="../../static/image/logo.png"></image>
			<view class="title">绑定手机号</view>
		</view>
		<view class="tips">为了您的账号安全，请输入验证手机号码， 验证成功后可直接使用手机号码登录</view>
		<view class="input_phone-content">
			<view class="change-address-code" @click="showActionSheet">
				<i class="iconfont iconfabu"></i>
				{{areaCode}}
				<i class="iconfont iconxiala"></i>
			</view>
			<input v-model="phone" class="input_phone" placeholder-style="color: #C3C3C3;" placeholder="请输入手机号码" />
		</view>
		<view class="input_code-content">
			<input v-model="code" class="input_code" placeholder-style="color: #C3C3C3;" placeholder="请输入验证码" />
			<view class="sen-code" @click="senCode" :class="sentCode ? 'color00ACFE' : ''">{{sendMsg}}</view>
		</view>
		<button class="login-btn" @click="login">绑定</button>
	</view>
</template>

<script>
	import Checker from '@/common/graceChecker.js';
	export default {
		data() {
			return {
				sentCode: false, //是否已发送验证码
				sendMsg: '获取验证码', // 发送验证码文字
				sendInterval: '', // 定时器
				sentCount: 60, // 发送验证码后60秒计时,
				phone: '', // 电话号码
				code: '', // 验证码
				areaCode: 86, //区号
			}
		},
		// 用户返回监听
		onBackPress(event) {
			if (event.from === 'navigateBack') {
				return false;
			}
			this.navigatorBack()
			return true
		},
		// 导航栏按钮
		onNavigationBarButtonTap() {
			this.navigatorBack()
		},
		methods: {
			// 返回事件
			navigatorBack() {
				uni.showModal({
					content: '验证码短信可能略有延迟 是否要稍等片刻？',
					cancelColor: '#C0C4CC',
					cancelText: '返回',
					confirmColor: '#FF9900',
					confirmText: '等待',
					success(res) {
						if (res.confirm) {
							console.log('用户点击等待');
						} else if (res.cancel) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			// 发送验证码
			senCode() {
				if (this.sentCode && this.sentCount > 0) {
					uni.showToast({
						title: this.sentCount + 'S后重试',
						icon: 'none'
					})
					return
				}
				clearInterval(this.sendInterval)
				this.sentCode = true
				this.sendMsg = '60S后重发'
				this.sendInterval = setInterval(() => {
					this.sentCount = this.sentCount - 1
					this.sendMsg = this.sentCount + 'S后重发'
					if (this.sentCount == 0) {
						clearInterval(this.sendInterval)
						this.sentCount = 60
						this.sendMsg = '重新获取'
						this.sentCode = false
					}
				}, 1000)
			},
			login() {
				//验证规则
				var rule = [{
						name: 'phone',
						checkType: 'phoneno',
						checkRule: '',
						errorMsg: '请输入正确的手机号'
					},
					{
						name: "code",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "验证码不能为空"
					}
				];
				//验证数据
				var data = {
					phone: this.phone,
					code: this.code
				};
				var getCheck = Checker.check(data, rule);
				if (!getCheck) {
					uni.showToast({
						title: Checker.error,
						icon: 'none'
					});
					return;
				}
			},
			// 从底部弹出电话号码地区前缀
			showActionSheet() {
				uni.showActionSheet({
					itemList: ['中国大陆 +86', '香港 +852', '澳门 +853'],
					success: res => {
						this.areaCode = res.tapIndex == 0 ? 86 : res.tapIndex == 1 ? 852 : 853
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-phone {
		position: relative;

		.iconxiala {
			margin-left: 4upx;
		}

		.color00ACFE {
			color: #00ACFE !important;
		}

		.logo-title {
			display: flex;
			margin: 22upx 0 0 12upx;

			image {
				width: 128upx;
				height: 128upx;
			}

			.title {
				font-size: 36upx;
				font-weight: bold;
				line-height: 128upx;
				font-family: Source Han Sans CN;
			}
		}

		.tips {
			margin-left: 30upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 36upx;
			color: #414141;
			opacity: 1;
		}

		.input_phone-content,
		.input_code-content {
			position: relative;
			width: 702upx;
			height: 86upx;
			margin: auto;
			margin-top: 40upx;

			input {
				width: 100%;
				height: 100%;
				border-radius: 86upx;
				background-color: #F4F7FC;
				box-sizing: border-box;
				font-size: 30upx;
			}

			.change-address-code {
				position: absolute;
				width: 169upx;
				height: 86upx;
				line-height: 86upx;
				text-align: center;
				color: #333333;
				font-weight: bold;
			}

			.input_phone {
				padding-left: 169upx;
			}

			.input_code {
				padding-left: 50upx;
				padding-right: 200upx;
			}

			.sen-code {
				position: absolute;
				top: 0;
				width: 200upx;
				height: 86upx;
				line-height: 86upx;
				right: 0;
				color: #C3C3C3;
				font-size: 30upx;
			}
		}

		.input_phone-content {
			margin-top: 102upx;
		}

		.login-btn {
			width: 702upx;
			height: 98upx;
			border-radius: 98upx;
			background-color: #FF9900;
			color: white;
			font-size: 36upx;
			margin-top: 96upx;
		}

		.order-content {
			display: flex;
			width: 702upx;
			margin: auto;
			margin-top: 24upx;
			margin-bottom: 154upx;
			justify-content: flex-end;

			.help {
				font-size: 24upx;
				color: #C0C4CC;
			}

			.password-login {
				color: #666666;
				font-size: 24upx;
				margin-left: 32upx;
			}
		}

		.zzjy-relus {
			display: flex;
			justify-content: center;
			font-size: 24upx;

			radio {
				transform: scale(0.5);
			}

			.iagree {
				color: #C0C4CC;
				font-size: 24upx;
			}

			.relu,
			.privacy {
				font-size: 24upx;
				color: #00ACFE;
			}
		}
	}
</style>
